@import '../variable.scss';
@import '../mixins.scss';

.shop {
  padding: 0 .18rem;
  &__search {
    display: flex;
    margin: .14rem 0 .04rem 0;
    line-height: .32rem;
    align-items: center;
    &__back {
      width: .3rem;
      font-size: .24rem;
      color: $back-iconColor;
    } 
    .search__input {
      flex: 1;
    }
    &__icon {
      width: .44rem;
      text-align: center;
      color: $bgColor;
    }
    &__input {
      display: block;
      width: 100%;
      padding-right: .2rem;
      border: none;
      outline: none;
      background: none;
      height: .32rem;
      font-size: .14rem;
      color: $content-fontcolor;
      &::placeholder {
        color: $content-fontcolor;
      }
    }
  }
  .content {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 1.5rem;
    bottom: .5rem;
    .category {
      overflow-y: scroll;
      height: 100%;
      width: .76rem;
      background: $search-bgColor;
      &__item {
        line-height: .4rem;
        text-align: center;
        font-size: .14rem;
        color: $content-fontcolor;
        &.active {
          background: #FFF;
        }
      }
    }
    .product {
      overflow-y: scroll;
      flex: 1;
      &__item {
        display: flex;
        position: relative;
        padding: .12rem 0;
        margin: 0 .16rem;
        border-bottom: .01rem solid $content-bgColor;
        &__img {
          width: .68rem;
          height: .68rem;
          margin-right: .16rem;
        }
        &__detail {
          overflow: hidden;
        }
        &__title {
          line-height: .2rem;
          margin: 0;
          font-size: .14ren;
          color: $content-fontcolor;
          @include ellipsis;
        }
        &__sales {
          margin: .06rem 0;
          line-height: .16rem;
          font-size: .12rem;
          color: $content-fontcolor;
        }
        &__price {
          margin: 0;
          line-height: .2rem;
          font-size: .14rem;
          color: $highlight-fontColor;
        }
        &__yen {
          font-size: .12rem;
        }
        &__origin {
          margin-left: .06rem;
          line-height: .2rem;
          font-size: .12rem;
          color: $light-fontColor;
          text-decoration: line-through;
        }
      }
      &__number {
        position: absolute;
        right: .0;
        bottom: .12rem;
        &__minus, &__plus {
          display: inline-block;
          width: .2rem;
          height: .2rem;
          line-height: .18rem;
          border-radius: 50%;
          font-size: .2rem;
          text-align: center;
        }
        &__minus {
          border: .01rem solid $medium-fontColor;
          color: $medium-fontColor;
          margin-right: .08rem;
        }
        &__plus {
          background-color: $btn-bgColor;
          color: #FFF;
          margin-left: .08rem;
        }
      }
    }
  }
  .mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba($color: #000, $alpha: .5);
    z-index: 1;
  }
  .cart {
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFF;
    .check {
      border-top: .01rem solid $content-bgColor;
      display: flex;
      box-sizing: border-box;
      height: .5rem;
      line-height: .5rem;
      &__icon {
        width: .84rem;
        position: relative;
        img {
          display: block;
          margin: .12rem auto;
          width: .28rem;
        }
        &__tag {
          position: absolute;
          left: .46rem;
          top: .04rem;
          padding: 0 .04rem;
          // right: .2rem;
          min-width: .2rem;
          height: .2rem;
          line-height: .2rem;
          background-color: $highlight-fontColor;
          border-radius: .1rem;
          font-size: .12rem;
          text-align: center;
          color: #FFF;
          transform: scale(.5);
          transform-origin: left center;
        }
      }
      &__info {
        flex: 1;
        color: $content-fontcolor;
        font-size: .12rem;
        &__price {
          color: $highlight-fontColor;
          font-size: .18rem;
        }
      }
      &__btn {
        width: .98rem;
        background-color: $btn-bgColor;
        text-align: center;
        color: #FFF;
        font-size: .14rem;
      }
    }
    .product {
      overflow-y: scroll;
      flex: 1;
      background: #FFF;
      &__header {
        display: flex;
        line-height: .52rem;
        border-bottom: .01rem solid $content-bgColor;
        font-size: .14rem;
        color: $content-fontcolor;
        &__all {
          width: .64rem;
          margin-left: .18rem;
          .iconfont {
            display: inline-block;
            vertical-align: top;
            margin-right: .1rem;
            font-size: .2rem;
          }
        }
        &__clear {
          flex: 1;
          margin-right: .16rem;
          text-align: right;
        }
      }
      &__item {
        display: flex;
        position: relative;
        padding: .12rem 0;
        margin: 0 .16rem;
        border-bottom: .01rem solid $content-bgColor;
        &__checked {
          line-height: .5rem;
          margin-right: .2rem;
          font-size: .2rem;
        }
        &__img {
          width: .46rem;
          height: .46rem;
          margin-right: .16rem;
        }
        &__detail {
          overflow: hidden;
        }
        &__title {
          line-height: .2rem;
          margin: 0;
          font-size: .14ren;
          color: $content-fontcolor;
          @include ellipsis;
        }
        &__price {
          margin: .06rem 0 0 0;
          line-height: .2rem;
          font-size: .14rem;
          color: $highlight-fontColor;
        }
        &__yen {
          font-size: .12rem;
        }
        &__origin {
          margin-left: .06rem;
          line-height: .2rem;
          font-size: .12rem;
          color: $light-fontColor;
          text-decoration: line-through;
        }
      }
      &__number {
        position: absolute;
        right: .0;
        bottom: .26rem;
        &__minus, &__plus {
          display: inline-block;
          width: .2rem;
          height: .2rem;
          line-height: .18rem;
          border-radius: 50%;
          font-size: .2rem;
          text-align: center;
        }
        &__minus {
          border: .01rem solid $medium-fontColor;
          color: $medium-fontColor;
          margin-right: .08rem;
        }
        &__plus {
          background-color: $btn-bgColor;
          color: #FFF;
          margin-left: .08rem;
        }
      }
    }
    .icon-checked {
      color: $btn-bgColor;
    }
    .icon-uncheck {
      color: $light-fontColor;
    }
  }
}
